<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="./js/flexible.js"></script>
    <link rel="stylesheet" href="icon/iconfont.css">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/public.css">
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <div id="app">
        <header>
            <div class="box_l">
                <i class="iconfont icon-ling"></i>
            </div>
            <div class="box_c">
                <img src="./images/logo.png" alt="">
            </div>
            <div class="box_r">
                <i class="iconfont icon-search"></i>
            </div>
        </header>
        <main>
            <section>
                <div class="banner">
                    <img src="./images/banner11_02.jpg" alt="">
                </div>
                <nav>
                    <div class="nav_box">
                        <img src="./images/icon1.png" alt="">
                        <a href="##">每日秒杀</a>
                    </div>
                    <div class="nav_box">
                        <img src="./images/icon2.png" alt="">
                        <a href="##">领券中心</a>
                    </div>
                    <div class="nav_box">
                        <img src="./images/icon3.png" alt="">
                        <a href="##">新人专享</a>
                    </div>
                    <div class="nav_box">
                        <img src="./images/icon4.png" alt="">
                        <a href="##">上新好物</a>
                    </div>
                </nav>
                <div class="live">
                    <div class="content">
                        <h1><span>最新</span>涂上大红唇，泫雅妆容get</h1>
                        <h1><span>最新</span>噢，高光！我的生命之光</h1>
                    </div>
                </div>
                <div class="product">
                    <div class="banner_pro">
                        <img src="./images/list1.jpg" alt="">
                        <ul class="pro_list">
                            <li>
                                <img src="./images/list1-1.jpg" alt="">
                                <p>INNISFREE悦诗风吟绿茶保湿平衡两件套盒</p>
                                <b>¥162</b>
                            </li>
                            <li>
                                <img src="./images/list1-2.jpg" alt="">
                                <p>LANEIGE兰芝 雪纱防晒隔离霜 紫色...</p>
                                <b>¥127</b>
                            </li>
                            <li>
                                <img src="./images/list1-3.jpg" alt="">
                                <p>季然生活 全棉印花夏被 化羽 150*200cm</p>
                                <b>¥98</b>
                            </li>
                            <li>
                                <img src="./images/list1-4.jpg" alt="">
                                <p>INNISFREE悦诗风吟绿茶保湿平衡两件套盒</p>
                                <b>¥162</b>
                            </li>
                            <li>
                                <img src="./images/list1-5.jpg" alt="">
                                <p>INNISFREE悦诗风吟绿茶保湿平衡两件套盒</p>
                                <b>¥162</b>
                            </li>
                        </ul>
                    </div>
                    <div class="banner_pro">
                        <img src="./images/list2.jpg" alt="">
                        <ul class="pro_list">
                            <li>
                                <img src="./images/list2-1.jpg" alt="">
                                <p>INNISFREE悦诗风吟绿茶保湿平衡两件套盒</p>
                                <b>¥162</b>
                            </li>
                            <li>
                                <img src="./images/list2-2.jpg" alt="">
                                <p>LANEIGE兰芝 雪纱防晒隔离霜 紫色...</p>
                                <b>¥127</b>
                            </li>
                            <li>
                                <img src="./images/list2-3.jpg" alt="">
                                <p>季然生活 全棉印花夏被 化羽 150*200cm</p>
                                <b>¥98</b>
                            </li>
                            <li>
                                <img src="./images/list2-4.jpg" alt="">
                                <p>INNISFREE悦诗风吟绿茶保湿平衡两件套盒</p>
                                <b>¥162</b>
                            </li>
                            <li>
                                <img src="./images/list2-1.jpg" alt="">
                                <p>INNISFREE悦诗风吟绿茶保湿平衡两件套盒</p>
                                <b>¥162</b>
                            </li>
                        </ul>
                    </div>
                    <div class="banner_pro">
                        <img src="./images/pic_03.jpg" alt="">
                        <ul class="pro_list">
                            <li>
                                <img src="./images/list1-4.jpg" alt="">
                                <p>INNISFREE悦诗风吟绿茶保湿平衡两件套盒</p>
                                <b>¥162</b>
                            </li>
                            <li>
                                <img src="./images/list1-5.jpg" alt="">
                                <p>LANEIGE兰芝 雪纱防晒隔离霜 紫色...</p>
                                <b>¥127</b>
                            </li>
                            <li>
                                <img src="./images/list1-6.jpg" alt="">
                                <p>季然生活 全棉印花夏被 化羽 150*200cm</p>
                                <b>¥98</b>
                            </li>
                            <li>
                                <img src="./images/list1-4.jpg" alt="">
                                <p>INNISFREE悦诗风吟绿茶保湿平衡两件套盒</p>
                                <b>¥162</b>
                            </li>
                            <li>
                                <img src="./images/list1-5.jpg" alt="">
                                <p>INNISFREE悦诗风吟绿茶保湿平衡两件套盒</p>
                                <b>¥162</b>
                            </li>
                        </ul>
                    </div>
                    <div class="banner_pro">
                        <img src="./images/pic1_03.jpg" alt="">
                        <ul class="pro_list">
                            <li>
                                <img src="./images/list1-1.jpg" alt="">
                                <p>INNISFREE悦诗风吟绿茶保湿平衡两件套盒</p>
                                <b>¥162</b>
                            </li>
                            <li>
                                <img src="./images/list1-2.jpg" alt="">
                                <p>LANEIGE兰芝 雪纱防晒隔离霜 紫色...</p>
                                <b>¥127</b>
                            </li>
                            <li>
                                <img src="./images/list1-3.jpg" alt="">
                                <p>季然生活 全棉印花夏被 化羽 150*200cm</p>
                                <b>¥98</b>
                            </li>
                            <li>
                                <img src="./images/list1-4.jpg" alt="">
                                <p>INNISFREE悦诗风吟绿茶保湿平衡两件套盒</p>
                                <b>¥162</b>
                            </li>
                            <li>
                                <img src="./images/list1-5.jpg" alt="">
                                <p>INNISFREE悦诗风吟绿茶保湿平衡两件套盒</p>
                                <b>¥162</b>
                            </li>
                        </ul>
                    </div>    
                </div>

                <div class="link">
                    <div class="banner_pro">
                        <img src="./images/pic2_03.jpg" alt="">
                        <ul class="pro_list">
                            <li>
                                <img src="./images/list1-1.jpg" alt="">
                                <p>INNISFREE悦诗风吟绿茶保湿平衡两件套盒</p>
                                <b>¥162</b>
                            </li>
                            <li>
                                <img src="./images/list1-2.jpg" alt="">
                                <p>LANEIGE兰芝 雪纱防晒隔离霜 紫色...</p>
                                <b>¥127</b>
                            </li>
                            <li>
                                <img src="./images/list1-3.jpg" alt="">
                                <p>季然生活 全棉印花夏被 化羽 150*200cm</p>
                                <b>¥98</b>
                            </li>
                            <li>
                                <img src="./images/list1-4.jpg" alt="">
                                <p>INNISFREE悦诗风吟绿茶保湿平衡两件套盒</p>
                                <b>¥162</b>
                            </li>
                            <li>
                                <img src="./images/list1-5.jpg" alt="">
                                <p>INNISFREE悦诗风吟绿茶保湿平衡两件套盒</p>
                                <b>¥162</b>
                            </li>
                        </ul>
                    </div>
                    <div class="last">
                        <h2>/全球必买/</h2>
                        <h3>HOT GOOD</h3>
                        <div class="last_con">
                            <dl class="last_box">
                                <dt><img src="./images/img1.jpg" alt=""></dt>
                                <dd>Estee Lauder 雅诗兰黛 特润修护肌透精华露 小棕瓶...</dd>
                                <h4><i>¥980</i><span>美国</span></h4>
                            </dl>
                            <dl class="last_box">
                                <dt><img src="./images/img2.jpg" alt=""></dt>
                                <dd>Estee Lauder 雅诗兰黛 特润修护肌透精华露 小棕瓶...</dd>
                                <h4><i>¥980</i><span>美国</span></h4>
                            </dl>
                            <dl class="last_box">
                                <dt><img src="./images/img3.jpg" alt=""></dt>
                                <dd>Tom Ford 汤姆·福特 黑管黑金唇膏 16#3g</dd>
                                <h4><i>¥980</i><span>美国</span></h4>
                            </dl>
                            <dl class="last_box">
                                <dt><img src="./images/img4.jpg" alt=""></dt>
                                <dd>Lancome兰蔻 清莹柔肤水大粉水 400ml </dd>
                                <h4><i>¥980</i><span>美国</span></h4>
                            </dl>
                            <dl class="last_box">
                                <dt><img src="./images/img5.jpg" alt=""></dt>
                                <dd>Whoo后 拱辰享 水妍 水乳霜套装</dd>
                                <h4><i>¥980</i><span>美国</span></h4>
                            </dl>
                            <dl class="last_box">
                                <dt><img src="./images/img6.jpg" alt=""></dt>
                                <dd>Whoo后 拱辰享 天气丹 水乳霜套装</dd>
                                <h4><i>¥980</i><span>美国</span></h4>
                            </dl>
                        
                        </div>
                       
                    </div>
                </div>
            </section>
        </main>
        <footer>
            <div class="bottom">
                <img class="pic1" src="./images/tab1-2.png" alt="">
                <img class="pic2" src="./images/tab1.png" alt="">
                <em class="active">首页</em>
            </div>
            <div class="bottom">
                <img class="pic1" src="./images/tab2.png" alt="">
                <img class="pic2" src="./images/tab2-1.png" alt="">
                <em>分类</em>
            </div>
            <div class="bottom">
                <img class="pic1" src="./images/tab3.png" alt="">
                <img class="pic2" src="./images/tab3-2.png" alt="">
                <em>购物车</em>
            </div>
            <div class="bottom">
                <img class="pic1" src="./images/tab4.png" alt="">
                <img class="pic2" src="./images/tab4-2.png" alt="">
                <em>我的</em>
            </div>
        </footer>
    </div>
</body>
<script>
    var abtn = document.querySelectorAll(".bottom");
    var aimg = document.querySelectorAll(".bottom img")
    var aem = document.querySelectorAll("em");
    for(var i=0;i<abtn.length;i++){
        abtn[i].index = i;
        aem[i].onclick=function(){
            for(var i=0;i<abtn.length;i++){
                aem[i].className = ""
            }
            this.className = "active" 
        }
    }
</script>
</html>